<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询_媒体特性</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    h1{
      color: white;
      background-color: gray;
      text-align: center;
      height: 200px;
      line-height: 200px;
    }

    /*检测到视口的宽度为800px时去应用这些样式*/
    @media (width: 800px) {
      h1{
        background-color: green;
      }
    }
    /*小于等于799px时用这些样式*/
    @media (max-width: 799px) {
      h1{
        background-color: red;
      }
    }
    /*大等于801px时用这些样式*/
    @media (min-width: 801px) {
      h1{
        background-color: gold;
      }
    }

  /*  检测屏幕的宽度等于1280时,应用如下样式*/
    @media(device-width: 1280px){
      h1{
        color: green;
      }
    }
  /*
  height:检测视口高度
  min-height:检测视口最小高度
  max-height:检测视口最大高度
  max-device-width:检测设备最大宽度
  min-device-width:检测设备最小宽度
  orientation:检测视口旋转方向(是否横屏)
              1.portrait:视口处于纵向
              2.landscape:视口处于横向
  */
  </style>
</head>
<body>
<h1>你好啊</h1>
</body>
</html>